相信我們已經很習慣在我們的APP出現這樣的手勢：

今天我們就要在我們的代辦清單內加入

這邊我使用了一個套件，flutter_slidable在 flutter package 分數達到99分。
flutter_slidable: https://pub.dev/packages/flutter_slidable
使用方法也很簡單，一樣打開我們的pubspec.yaml在dependencies下加入，

dependencies:
  flutter_slidable: ^0.5.3

然後執行安裝：

flutter pub get

這個範圍主要改變的地方在lib/widgets/todo_tile.dart檔案，下列為改完後的程式碼

import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

class TodoItem extends StatelessWidget {
  final int index;
  final String title;
  final bool done;
  final Function toggleDone;
  final Function toggleDelete;
  final SlidableController slidableController;

  TodoItem({
    this.title,
    this.done,
    this.toggleDone,
    this.index,
    this.slidableController,
    this.toggleDelete,
  });

  void _showSnackBar(actionType) {
    print(actionType);
    if (actionType == 'Done') {
      toggleDone(index, true);
    }
    if (actionType == 'Delete') {
      toggleDelete(index);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Slidable(
      dismissal: SlidableDismissal(
        child: SlidableDrawerDismissal(),
        // 向右向左滑到底事件監聽
        onWillDismiss: (actionType) {
          _showSnackBar(
              actionType == SlideActionType.primary ? 'Done' : 'Delete');
          return;
        },
      ),
      key: Key(title),
      controller: slidableController,
      actionPane: SlidableDrawerActionPane(), // 展開方式
      actionExtentRatio: 0.25,  // 每個 action 大小佔全部百分比
      child: Container(
          color: Colors.white,
          child: ListTile(
            title: Text(
              title,
              style: TextStyle(
                fontSize: 18,
                decoration: done ? TextDecoration.lineThrough : null,
              ),
            ),
            leading: Checkbox(
              activeColor: Colors.lightBlueAccent,
              value: done,
              onChanged: (val) {
                toggleDone(index, val);
              },
            ),
          )),
      // 左邊展開事件選項
      actions: <Widget>[
        IconSlideAction(
          caption: 'Done',
          color: Colors.green,
          icon: Icons.check,
          onTap: () => _showSnackBar('Done'),
        ),
      ],
      // 右邊展開事件選項
      secondaryActions: <Widget>[
        IconSlideAction(
          caption: 'Share',
          color: Colors.indigo,
          icon: Icons.share,
          onTap: () => _showSnackBar('Share'),
        ),
        IconSlideAction(
          caption: 'Delete',
          color: Colors.red,
          icon: Icons.delete,
          onTap: () => _showSnackBar('Delete'),
        ),
      ],
    );
  }
}

先說明展開方式，套件有設定好幾種展開方式，套件連結也有說明，我也把它貼到這邊。

• SlidableBehindActionPane
  
• SlidableScrollActionPane
  
• SlidableDrawerActionPane
  
• SlidableStrechActionPane
  

基本看圖比較好理解，就是一些細微的差別，仔細看就知道囉～

再來是，看看上面範例
就可以看得出來一次可以開啟很多滑動選項，如果你想要一次只能打開一個清單的選項時怎麼做？

final SlidableController slidableController = SlidableController();
...
Slidable(
  key: Key(item.title),
  controller: slidableController,
  ...
);

基本就是要建立一個 SlidableController 實例，在Slidable Widget加上唯一的Key，把controller加上去就好囉～

上列改好的程式碼就可以看到，我在construtor時多帶了SlidableController參數，在父組件建立好後傳進來就大功告成了！